import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component { 
	constructor(props) {
		super(props);
     
	}

	componentDidMount(){
		// 我的关系圈
    }
   
	
	render() {
		return (
            <div className="main relationship">
                <div className="ship-item">
                    <p className="tal pl30 f28  pt30 pb30 bor-bottom">家庭圈</p>
                    <div className="clearfix">
                        <div className="ship-des">
                            <p className="f32 strong">4</p>
                            <p className="f26 fc9 mt10">圈子人數</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">80,000</p>
                            <p className="f26 fc9  mt10">共享保額(元)</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">87.00</p>
                            <p className="f26 fc9 mt10">保費折扣(元)</p>                    
                        </div>
                    </div>
                    <div>
                        <div className="page-btn-1 f28" style={{width:"60%",paddingTop:"0.1rem",paddingBottom:"0.1rem"}}>
                            分享獲得額外的保證
                        </div>
                    </div>
                </div>

                <div className="ship-item">
                    <p className="tal pl30 f28 pt30 pb30 bor-bottom">朋友圈</p>
                    <div className="clearfix">
                        <div className="ship-des">
                            <p className="f32 strong">20</p>
                            <p className="f26 fc9 mt10">圈子人數</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">80,000</p>
                            <p className="f26 fc9  mt10">共享保額(元)</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">15.00</p>
                            <p className="f26 fc9 mt10">保費折扣(元)</p>                    
                        </div>
                    </div>
                    <div>
                        <div className="page-btn-1 f28" style={{width:"60%",paddingTop:"0.1rem",paddingBottom:"0.1rem"}}>
                            分享獲得額外的保證
                        </div>
                    </div>
                </div>

                <div className="ship-item">
                    <p className="tal pl30 f28 pt30 pb30 bor-bottom">同學圈</p>
                    <div className="clearfix">
                        <div className="ship-des">
                            <p className="f32 strong">15</p>
                            <p className="f26 fc9 mt10">圈子人數</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">80,000</p>
                            <p className="f26 fc9  mt10">共享保額(元)</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">36.00</p>
                            <p className="f26 fc9 mt10">保費折扣(元)</p>                    
                        </div>
                    </div>
                    <div>
                        <div className="page-btn-1 f28" style={{width:"60%",paddingTop:"0.1rem",paddingBottom:"0.1rem"}}>
                            分享獲得額外的保證
                        </div>
                    </div>
                </div>

                <div className="ship-item">
                    <p className="tal pl30 f28  pt30 pb30 bor-bottom">明星圈</p>
                    <div className="clearfix">
                        <div className="ship-des">
                            <p className="f32 strong">100</p>
                            <p className="f26 fc9 mt10">圈子人數</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">80,000</p>
                            <p className="f26 fc9  mt10">共享保額(元)</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">4.00</p>
                            <p className="f26 fc9 mt10">保費折扣(元)</p>                    
                        </div>
                    </div>
                    <div>
                        <div className="page-btn-1 f28" style={{width:'60%',paddingTop:'0.1rem',paddingBottom:'0.1rem'}}>
                            分享獲得額外的保證
                        </div>
                    </div>
                </div>

                <div className="ship-item">
                    <p className="tal pl30 f28  pt30 pb30 bor-bottom">大V圈</p>
                    <div className="clearfix">
                        <div className="ship-des">
                            <p className="f32 strong">500</p>
                            <p className="f26 fc9 mt10">圈子人數</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">80,000</p>
                            <p className="f26 fc9  mt10">共享保額(元)</p>                    
                        </div>
                        <div className="ship-des">
                            <p className="f32 strong">100.00</p>
                            <p className="f26 fc9 mt10">保費折扣(元)</p>                    
                        </div>
                    </div>
                    <div>
                        <div className="page-btn-1 f28" style={{width:'60%',paddingTop:'0.1rem',paddingBottom:'0.1rem'}}>
                            分享獲得額外的保證
                        </div>
                    </div>
                </div>
            </div>
        )
	}
}

export default App;   